<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10}px`}">
		<myHeard :search="search" :title="title" @goPath="goBack"></myHeard>

		<view class="myPages__Main" v-if="walletDetails">
			<view class="myPages__MainTopBox">
				<image class="myPages__MainTopBoxOneImg" :src="walletDetails.receiptMethodShow=='支付宝'?'/static/images/zfibaoIcon.png':
				walletDetails.receiptMethodShow=='银行卡'?'/static/images/yinhangkaIcon.png':''"></image>
				<image @click="serviceShow = true" class="myPages__MainTopBoxTwoImg" src="/static/images/headset.png">
				</image>
				<view class="myPages__MainTopBoxPrice">-{{walletDetails.withdrawMoney}}</view>
			</view>
			<view class="myPages__MainBottomBox">
				<view class="myPages__MainBottomItems">
					<span>提现方式</span>
					<span>{{walletDetails.receiptMethodShow}}</span>
				</view>
				<view class="myPages__MainBottomItems">
					<span>提现状态</span>
					<span :class="walletDetails.withdrawStatus == 30 ? 'redBj' : ''">{{walletDetails.withdrawStatus == 10 ? '提现-处理中' : walletDetails.withdrawStatus == 20 ? '提现成功' : walletDetails.withdrawStatus == 30 ? '提现失败-已拒绝' : ''}}</span>
				</view>
				<view class="myPages__MainBottomItems">
					<span>提现时间</span>
					<span>{{walletDetails.createTime | ff_createTime}}</span>
				</view>
				<view class="myPages__MainBottomItems">
					<span>提现单号</span>
					<span>{{walletDetails.withdrawNo}}</span>
				</view>
				<view v-if="walletDetails.withdrawStatus == 30" class="myPages__MainBottomItems">
					<span>拒绝原因</span>
					<span>{{walletDetails.refuseDesc ? walletDetails.refuseDesc : '无'}}</span>
				</view>
				

			</view>
		</view>

		<!-- 联系客服 -->
		<u-overlay :show="serviceShow" @click="serviceShow = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">联系客服</view>
				<image @click.stop="serviceShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<view class="saleBox__MainItem saleBox__MainItem--service"
						@click.stop="callSeller(servicePhone)">
						<span
							class="serviceIphone">客服电话：{{servicePhone ? servicePhone : '暂无客服'}}
						</span>
						<image class="serviceIphoneImg" src="/static/images/serviceIcons.png"></image>
					</view>
				</view>
			</view>
		</u-overlay>

	</view>
</template>

<script>
	import myHeard from '@/components/myHeard/index.vue'
	export default {
		components: {
			myHeard
		},
		data() {
			return {
				title: '提现详情',
				pageNum: 1,
				pageSize: 10,
				walletDetails: null,
				walletLogId: 0,
				serviceShow: false,
				servicePhone: null
			}
		},
		onLoad(oprtion) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			
			this.walletDetails = JSON.parse(oprtion.items);
			this.servicePhone = uni.getStorageSync('servicePhone')
			console.log('调用成功!--->',this.walletDetails)
			// this.initUserWxRecList();
		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		onShow() {
			// this.initUserWxRecList();

		},
		onReachBottom() {

		},
		filters: {
			ff_updateMoney(item) {
				return item > 0 ? `+${item}` : item;
			},
			ff_refundStatus(mycode) {
				return (mycode == 10) || (mycode == 20) ? '退款中' : mycode == 30 ? '拒绝退款' : mycode == 40 ? '已退款' : '';
			},
			ff_title(data) {
				return data.split(' ')[0];
			},
			ff_createTime(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()

				function formatNumber(n) {
					n = n.toString()
					return n[1] ? n : '0' + n
				}
				return `${year}年${month}月${day}日` + ' ' + `${formatNumber(hour)}:${formatNumber(minute)}`;
			}
		},
		methods: {
			callSeller(phone) {
				if (!phone) {

					uni.showToast({
						icon: 'none',
						title: '暂无客服'
					});
					return
				}
				uni.makePhoneCall({
					phoneNumber: phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
				});
				// this.serviceShow = false;
			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.navigateBack()
			},

		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		min-height: 100vh;
		background-color: #F7F8FC;
		box-sizing: border-box;

		.myPages__Main {
			width: 686rpx;
			// height: 446rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin: 90rpx auto;
			position: relative;
		}
		.redBj{
			color: #F0414D !important;
		}

		.serviceIphoneImg {
			width: 58rpx;
			height: 58rpx;
		}

		.serviceIphone {
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
		}

		.saleBox__MainItem--service {
			justify-content: space-between !important;
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.saleBox {
			bottom: 0;
			margin: 32rpx;
			margin-bottom: 48rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;

		}

		.saleBoxBody {
			height: 900rpx;
		}

		.saleBox__HeardImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}


		.saleBox__MainItem {
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 104rpx;
			background: #f7f8fc;
			opacity: 1;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			margin-top: 24rpx;

			span:nth-child(2) {
				font-size: 22rpx;
				font-family: 'DIN';
				color: #7b7d8d;
			}

		}

		.saleBox__MainItem--wthid {
			background: #dedfe3;
			color: #FFFFFF;
		}

		.saleBox__MainItem--red {
			background: #f44b5b;
			color: #FFFFFF;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

		.saleBox__MainBody {
			height: 800rpx;
			overflow: scroll;
		}

		.saleBox__MainBodyxxx {
			text-align: center;
			font-size: 30rpx;
			color: #B0B1BB;
			margin-top: 200rpx;
		}

		.saleBox__BiaoZhiItem {
			display: flex;
			height: 105rpx;
			margin: 20rpx 0;
			font-size: 26rpx;
			color: #B0B1BB;
		}

		.saleBox__BiaoZhiItem--black {
			color: #000;
		}

		.saleBox__BiaoZhiItemTitleBox {
			flex: 0 0 30rpx;
			position: relative;
		}

		.saleBox__BiaoZhiItemTitleBoxYuan {
			display: inline-block;
			width: 20rpx;
			height: 20rpx;
			background-color: #FDE1E3;
			position: absolute;
			top: 50%;
			border-radius: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.saleBox__BiaoZhiItemTitleBoxYuan--red {
			background-color: #F0414D !important;
		}

		.saleBox__BiaoZhiItemTitleBoxGan {
			display: inline-block;
			width: 6rpx;
			height: 113rpx;
			background-color: #FDE1E3;
			position: absolute;
			top: 109%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.saleBox__BiaoZhiItemContext {
			flex: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3; //保留多少行
			overflow: hidden;

		}

		.saleBox__BiaoZhiItemFtime {
			flex: 0 0 146rpx;
		}


		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

		}

		.saleBox__MainText {
			width: 100%;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 24rpx;
			background-color: #f7f8fc;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.myPages__MainTopBox {
			color: #000;
		}

		.myPages__MainTopBoxOneImg {
			width: 100rpx;
			height: 100rpx;
			border: 4rpx solid #fff;
			box-sizing: border-box;
			border-radius: 40rpx;
			position: absolute;
			top: -50rpx;
			left: calc(50% - 50rpx);
		}

		.myPages__MainTopBoxTwoImg {
			width: 40rpx;
			height: 40rpx;
			display: inline-block;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}

		.myPages__MainTopBoxPrice {
			height: 60rpx;
			font-size: 48rpx;
			font-family: DIN;
			font-weight: 500;
			line-height: 60rpx;
			color: #000000;
			text-align: center;
			margin-top: 50rpx;
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #F0F1F6;
			margin-bottom: 32rpx;
		}

		.myPages__MainBottomItems {
			display: flex;
			justify-content: space-between;
			padding-bottom: 16rpx;

			span {
				height: 40rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 40rpx;
				color: #7B7D8D;
			}

			span:nth-child(2) {
				color: #2B2B33;
			}
		}

	}
</style>
